<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>04_class与style绑定</title>
    <style>
      .red {
        color: red;
      }
      .green {
        color: green;
      }
    </style>
  </head>
  <body>
    <!--
      1. 理解
        在应用界面中, 某个(些)元素的样式是变化的
        class/style绑定就是专门用来实现动态样式效果的技术
      2. class绑定: :class='xxx'
        xxx是字符串
        xxx是对象
        xxx是数组
      3. style绑定
        :style="{ color: activeColor, fontSize: fontSize + 'px' }"
        其中activeColor/fontSize是data属性
      -->

    <div id="app">
      <h2>1. class绑定: :class='xxx'</h2>
      <p class="color">这是一段文字~</p>
      <!-- class对象形式 -->
      <p :class="{ red: isRed, green: !isRed }">这是一段文字~</p>
      <!-- class字符串形式 -->
      <p :class="color">这是一段文字~</p>
      <!-- class数组形式 -->
      <p :class="['red', 'green']">这是一段文字~</p>
      <p :class="[color]">这是一段文字~</p>
      <button @click="changeColor">改变颜色</button>

      <h2>2. style绑定</h2>
      <p style="color: red; font-size: 30px">这是一段文字~</p>
      <p
        :style="{
          color: color,
          fontSize: size + 'px'
        }"
      >
        这是一段文字~
      </p>
      <input type="text" placeholder="请输入字体大小" v-model="size" />
    </div>

    <script src="../js/vue.js"></script>
    <script>
      /*
        class样式：
          静态样式：<p class="color">这是一段文字~</p>
          动态样式：v-bind
            一个样式
              class字符串形式
            多个样式
              class对象形式
              class数组形式
        
        style样式
          
          能用class就用class
          什么场景不能用class：样式有无穷的变化, 用style
      */
      new Vue({
        el: "#app",
        data: {
          isRed: true,
          color: "red",
          size: 16,
        },
        methods: {
          changeColor() {
            this.isRed = !this.isRed;
            this.color = this.color === "red" ? "green" : "red";
          },
        },
      });
    </script>
  </body>
</html>
